<template>
  <div>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose">
      <div style="height: 64px; position:relative">
        <el-dropdown trigger="click" class="avator"  @command="optionsHandle">
            <div>
              <div class="left el-dropdown-link">
                <div style="margin: 10px 0 10px 16px;">
                  <div class="head">
                    <span>{{nickname.substr(0,1).toUpperCase()}}</span>
                  </div>
                  <div class="admin">
                    <h2>{{nickname}}</h2>
                    <h2>{{email}}</h2>
                  </div>
                </div>
              </div>
            </div>
            <el-dropdown-menu slot="dropdown" class="options">
                <el-dropdown-item command='setting'>设置</el-dropdown-item>
                <el-dropdown-item>导入</el-dropdown-item>
                <el-dropdown-item>注销</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <div class="right" @click='btn_search'>
            <p class="search"><i class="el-icon-search"></i></p>
        </div>
      </div>
      <router-link to="/myday">
        <el-menu-item index="0">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sun"></use>
          </svg>
          <span slot="title">我的一天</span>
        </el-menu-item>
      </router-link>
      <router-link
          is="check"
          v-for="(todo, index) in list"
          :index="index"
          :key="index"
          :id="todo.id"
          :title="todo.title"
          :icon="todo.icon"
        ></router-link>
    </el-menu>
    <!-- 设置窗口 -->
    <el-dialog
      title="设置"
      :visible.sync="settingVisible"
      width="30%">
      <div class='setting'>
        <div class="user-info">
          <div class="photo">{{nickname.substr(0,1).toUpperCase()}}</div>
          <p class="name">{{nickname}}</p>
          <p class="email">{{email}}</p>
          <a href="javascript:;">注销</a>
        </div>
        <div class="action">
         <a href="javascript:;">常规</a>
         <a href="javascript:;">帮助与反馈</a>
         <a href="javascript:;">关于</a>
        </div>
      </div>
    </el-dialog>
    <!-- 右键菜单 -->
    <div is='contextmenu'></div>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import contextmenu from '@/components/contextmenu'
import check from "@/components/check";
export default {
  name: "appSider",
  data() {
    return {
      settingVisible: false
    };
  },
  components: { check, contextmenu },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    btn_search() {
      this.$router.push("/search");
    },
    optionsHandle(command) {
      if (command === "setting") {
        this.settingVisible = true;
      }
    }
  },
  computed: mapState({
    nickname: state => state.user.nickname,
    email: state => state.user.email,
    list: state => state.checklist.checkList
  })
};
</script>

<style scoped lang="less" src="./index.less"></style>

